<template>
	<view>
		<wuc-tab :tab-list="tabList" textFlex :tabCur.sync="TabCur" @change="tabChange" tab-class="text-center text-black bg-white mywuc" select-class="text-blue"></wuc-tab>
		<view class="scroll_cont">
			<s-pull-scroll
				ref="pullScroll"
				:fixed="true"
				top="100"
				:bottom="TabCur == 0 ? 100 : 0"
				:pullDown="pullDown"
				:pullUp="loadData"
				finishText="我也是有底线的"
				v-if="TabCur <= 2"
			>
				<view v-if="TabCur == 0">
					<view v-for="(itemTwo, indexTwo) in dataList" :key="indexTwo" class="list" @tap="openInfo(itemTwo.bId, indexTwo)">
						<view class="list_cont">
							<view class="clearfix list_title" :style="{ color: itemTwo.bIsRead == 1 ? '#7788a2' : '#cdd4e7' }">
								<text class="fl list_title_l">{{ itemTwo.bTitle }}</text>
								<text class="fr list_title_r">{{ itemTwo.bDate }}</text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="TabCur == 1">
					<view v-for="(itemTwo, indexTwo) in dataList" :key="indexTwo" class="list" @tap="openInfo(itemTwo.bId, indexTwo)">
						<view class="list_cont">
							<view class="clearfix list_title" :style="{ color: itemTwo.bIsRead == 1 ? '#7788a2' : '#cdd4e7' }">
								<text class="fl list_title_l">[{{ itemTwo.bState == '1' ? '已回' : '未回' }}]{{ itemTwo.bTitle }}</text>
								<text class="fr list_title_r">{{ itemTwo.bDate }}</text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="TabCur == 2">
					<view v-for="(itemTwo, indexTwo) in dataList" :key="indexTwo" class="list" style="background-color: #071724;">
						<view class="list_plat">
							<text class="list_plat_time" :class="{ isBei: !(indexTwo % 2 == 0) }">{{ itemTwo.annDate }}</text>
							<text class="kailong" :class="{ isSan: !(indexTwo % 2 == 0) }"></text>
							<view class="content">
								<view>[{{ itemTwo.annTitle }}]</view>
								<view>{{ itemTwo.annContent }}</view>
							</view>
						</view>
					</view>
				</view>
			</s-pull-scroll>
			<view v-if="TabCur == 3">
				<view class="idea_cont">
					<!-- 	<view class="select_cont">
						<picker @change="bindPickerChange" :value="typeInfo" :range="typeList">
							<view class="select_cont_item">
								<text v-if="typeInfo==''"  v-model="form.name"  class="select_cont_text">请选择类型</text>
							</view>
						</picker>
					</view> -->
					<view class="input_cont"><input class="input_cont_item" v-model="form.bTitle" focus placeholder="请输入标题" /></view>
					<view class="tips_cont"><text class="tips">尊敬的会员，如使用平台时遇到任何问题，均可向我们进行反馈，我们将尽快为您处理！</text></view>
					<view class="area_cont"><textarea @blur="bindTextAreaBlur" v-model="form.bContent" placeholder="请输入内容,不能少于20个字" /></view>
					<view class="submit_btn_cont"><button class="submit_btn" @click="sub_add">提交</button></view>
				</view>
			</view>
		</view>
		<view class="btn_group clearfix" style="position: fixed;bottom: 0rpx;left: 0rpx;width: 750rpx;z-index: 999;" v-if="TabCur == 0">
			<button class="btn_group_l fl btn_style" @click="allRead">全部已读</button>
			<button class="btn_group_r fr btn_style" @click="allDel">全部删除</button>
		</view>
	</view>
</template>

<script>
import WucTab from '@/components/wuc-tab/wuc-tab.vue';
import uniCombox from '@/components/uni-combox/uni-combox';
import sPullScroll from '@/components/s-pull-scroll/index.vue';
import news from '../../static/dataJson/news.json';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';


export default {
	data() {
		return {
			TabCur: 0,
			typeList: ['type1', 'type2', 'type3', 'type4'],
			typeInfo: '',
			swiperHeight: 0, //外部的高度
			tabList: [],

			list: [],
			dataList: [],

			index: 0,

			form: {
				bTitle: '',
				bContent: ''
			}
		};
	},
	components: {
		WucTab,
		uniCombox,
		uniLoadMore,
		sPullScroll
	},
	mounted() {
		this.tabList = news.tabList;
		var that = this;
		uni.$on('deleteinfo', function(e) {
			that.dataList.splice(that.index, 1);
		});
	},
	onLoad(e) {
		
		if(e.tabCur)
				this.TabCur =parseInt(e.tabCur) 
		if(this.TabCur !=3) //不是联系我们
		this.refresh();
	},
	methods: {
		tabChange: function(index) {
			this.refresh();
		},
		refresh: function() {
			this.$nextTick(() => {
				if (this.$refs.pullScroll) this.$refs.pullScroll.refresh();
			});
		},
		pullDown: function(pullScroll) {
			this.getListData(this.TabCur, pullScroll);
		},
		loadData: function(pullScroll) {
			this.getListData(this.TabCur, pullScroll);
		},
		getListData: function(tab, pullScroll) {
			//mode 1代表下一页 0代表刷新
			//console.log(pullScroll.page);

			if (pullScroll.page == 1) {
				this.dataList = [];
			}
			var that = this;

			if (tab == 0) {
				this.$api.http
					.get('assistance/books/getAllBooks', {
						page: pullScroll.page,
						type: 1
					})
					.then(res => {
						//	this.tabList[tab].name += "("+res.data.length+")";
						this.callbackapi(res.data, pullScroll);
						pullScroll.success();
					});
			} else if (tab == 1) {
				this.$api.http
					.get('assistance/books/getAllBooks', {
						page: pullScroll.page,
						type: 2
					})
					.then(res => {
						//	this.tabList[tab].name += "("+res.data.length+")";
						this.callbackapi(res.data, pullScroll);
						pullScroll.success();
					});
			} else {
				this.$api.http
					.get('assistance/books/getAnnouncementList', {
						page: pullScroll.page
					})
					.then(res => {
						this.callbackapi(res.data, pullScroll);
						pullScroll.success();
					});
			}
		},
		callbackapi: function(data, pullScroll) {
			for (var i = 0; i < data.length; i++) {
				this.dataList.push(data[i]);
			}

			if (data.length == 0) {
				if (pullScroll.page == 1) {
					pullScroll.empty();
				} else {
					pullScroll.finish(true);
				}
			}
		},

		sub_add() {
			const data = this.form;
			if (!data.bTitle || !data.bContent || data.bContent.length < 20) {
				this.$api.msg('请输入留言内容，内容不得少于20字');
				return;
			}
			this.$api.http.post('assistance/books/addABooks', data).then(res => {
				this.$api.msg('留言成功');
				setTimeout(() => {
					uni.navigateBack();
				}, 1000);
			});
		},

		openInfo: function(id, index) {
			var that = this;
			uni.navigateTo({
				url: './info?id=' + id,
				success: res => {
					that.index = index;
				},
				fail: () => {},
				complete: () => {}
			});
		},
		
		allRead: function(){
			
			this.$api.http.post('assistance/books/setAllRead').then(res => {
				this.$api.msg(res.msg);
				
				if(res.status ==200)
				{
					setTimeout(() => {
							this.refresh();
					}, 1000);
				}
			});
		},
		
		allDel:function(){
			this.$api.http.post('assistance/books/deleteAllBooks').then(res => {
				this.$api.msg(res.msg);
				
				if(res.status ==200)
				{
					setTimeout(() => {
							this.refresh();
					}, 1000);
				}
			});
		},
		
		bindTextAreaBlur: function(e) {
			//console.log(e.detail.value)
		}
	}
};
</script>

<style lang="scss">
.clearfix {
	zoom: 1;
	display: block;
}

.clearfix:after {
	content: '.';
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
}

.text-blue {
	color: #5390e3;
}

.fl {
	float: left;
}

.fr {
	float: right;
}
swiper {
	height: 100vh;
}
.mywuc {
	font-size: 30upx;
	position: fixed;
	left: 0rpx;
	top: 90upx;
	width: 750rpx;
	z-index: 888;
}
/* #ifdef APP-PLUS || MP-WEIXIN*/
.mywuc {
	top: 0upx;
}
/* #endif */
.isBei {
	background: #5fbfbe !important;
}
.isSan {
	border-bottom: 50upx solid #5fbfbe !important;
}
.scroll_cont {
	background-color: $bg-gap;
	height: 100vh;
	.none {
		padding: 150px 0;
		text-align: center;
		color: #adadad;
		line-height: 50px;
		img {
			width: 60px;
			height: 60px;
		}
	}
	.list {
		background-color: $bg-theme;
		margin: 16upx 20upx;

		.list_plat {
			// padding: 20upx;
			font-size: 26upx;
			line-height: 44upx;
			position: relative;
			padding-top: 50upx;

			.list_plat_time {
				position: absolute;
				top: 0upx;
				left: 0;
				font-size: 24upx;
				color: #ffffff;
				padding-left: 12upx;
				line-height: 50upx;
				height: 50upx;
				background-color: #4ba2e7;
				z-index: 9999;
				min-width: 156upx;
			}

			.kailong {
				width: 0;
				height: 0;
				border-right: 50upx solid transparent;
				border-left: 50upx solid transparent;
				border-bottom: 50upx solid #4ba2e7;
				position: absolute;
				left: 107upx;
				top: 0upx;
				z-index: 99;
			}
			.list_plat_title {
				padding: 20upx 0 0 20upx;
			}
			.content {
				background-color: #ffffff;
				padding: 20upx;
			}
		}

		.list_cont {
			padding: 26upx 22upx;

			.list_title {
				.list_title_l {
					font-size: 28upx;
					width: 56%;
					height: 36upx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: inline-block;
					white-space: nowrap;
				}

				.list_title_r {
					font-size: 24upx;
					line-height: 36upx;
					color: #636564;
				}
			}
		}
	}

	.list:first-child {
		.list_title {
			color: 848484;
		}
	}
	.idea_cont {
		padding: 100upx 20upx 20upx;
		.select_cont {
			margin: 0;
			padding: 0;
			.select_cont_item {
				background: #ffffff;
				padding: 18upx 40upx;
				font-size: 26upx;
				.select_cont_text {
					color: gray;
				}
			}
		}
		.input_cont {
			height: 72upx;
			background: #ffffff;
			line-height: 72upx;
			margin-top: 20upx;
			.input_cont_item {
				font-size: 26upx;
				height: 72upx;
				padding: 24upx 40upx;
			}
		}
		/* #ifdef APP-PLUS || MP-WEIXIN*/
		.input_cont {
			height: 86upx;
			line-height: 86upx;
			.input_cont_item {
				height: 86upx;
				padding: 20upx 40upx 24upx;
			}
		}
		/* #endif */
		.tips_cont {
			line-height: 36upx;
			margin: 0 0 10upx;
			.tips {
				font-size: 24upx;
				color: #f9ad5f;
			}
		}
		.area_cont {
			height: 300upx;
			background: #fff;
			margin-top: 20upx;
			font-size: 28upx;
			padding: 18upx 40upx;
			uni-textarea {
				font-size: 26upx;
			}
		}
		.photo_cont {
			background-color: #ffffff;
			padding: 20upx 18upx;
			height: 280upx;
			margin-top: 20upx;
			.photo_sign {
				background-color: #fafafa;
				text-align: center;
				width: 240upx;
				height: 240upx;
				color: #dcdcdc;
				.photo_icon {
					width: 60upx;
					height: 60upx;
					margin: 26upx 0 10upx;
				}
				.photo_text_b {
					font-size: 18upx;
				}
				.photo_text_s {
					margin-top: 6upx;
					font-size: 16upx;
				}
				.photo_preview {
					width: 100%;
					height: 100%;
				}
			}
		}
		/* #ifdef APP-PLUS || MP-WEIXIN*/
		.photo_cont {
			height: 250upx;
			.photo_sign {
				width: 210upx;
				height: 210upx;
			}
		}
		/* #endif */
		.submit_btn_cont {
			margin-top: 20upx;
			.submit_btn {
				background-color: #0081ff;
				color: #ffffff;
			}
		}
	}
}

.btn_group {
	text-align: center;
	padding: 3% 4%;
	background-color: $bg-theme;

	.btn_style {
		color: #ffffff;
		font-size: 28upx;
		width: 48%;
		height: 60upx;
		line-height: 60upx;
	}

	.btn_group_l {
		background-color: #5574d1;
	}

	.btn_group_r {
		background-color: #4ba2e5;
	}
}
</style>
